import router from '@/router';
import { reactive } from 'vue';
import { purmamPage } from '@api/url/test';
import { getInitParam, queryDataFilter } from '@utils/baseMethods';

export default function importConfig() {
  const base = reactive<any>({
    size: 'medium',
    columns: [
      {
        title: '容器规则',
        dataIndex: 'company',
      },
      {
        title: '容器模板',
        dataIndex: 'creator',
      },
      {
        title: '容器数量',
        dataIndex: 'ma001',
      },
      {
        title: '容器重量',
        slotName: 'enable',
      },
      {
        title: '创建时间',
        dataIndex: 'ma003',
        checked: true,
      },
      {
        title: '操作',
        slotName: 'option',
        checked: true,
      },
    ],
    searchConfig: null,
    config: ['fold'],
    pagination: {
      defaultPageSize: 10,
      total: 1, //总条数
      current: 1,
      pageSize: 10,
      showTotal: true,
      showPageSize: true,
      pageSizeOptions: [10, 20, 30, 40, 50],
    },
    editVisible: false,
    showSearchBar: true,
    searchBar: '隐藏搜索',
    data: [],
    btns: [
      { icon: '', name: '模板下载' },
      { icon: '', name: '打印' },
      { icon: '', name: '打印(预览)' },
    ],
  });

  const collection = reactive([
    { label: '容器规则', value: '', key: 'COMPANY', placeholder: '请输入分类名称', isInput: true },
    { label: '容器模板', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '容器数量', value: '', key: 'COMPANY', placeholder: '请输入分类名称', isInput: true },
    { label: '容器重量', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '容器说明', value: '', key: 'COMPANY', placeholder: '请输入分类名称', isInput: true },
    { label: '料号', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '来源单号', value: '', key: 'COMPANY', placeholder: '请输入分类名称', isInput: true },
    { label: '备注', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '是否允许混装', value: '', key: 'COMPANY', placeholder: '请输入分类名称', isInput: true },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
    { label: '打印标签数', value: '', key: 'CREATOR', placeholder: '选择是或否', isSelect: true, options: ['是', '否'] },
  ]);

  // watch(() => base.column)
  const opArticleNumber = () => {
    router.push('/numberConfiguration');
  };

  const getTableData = (flag: string) => {
    if (flag == 'search') {
      base.pagination.current = 1;
      base.pagination.pageSize = 10;
    }
    const reqParam = {
      page: base.pagination.current,
      pageSize: base.pagination.pageSize,
    };
    let req = getInitParam(queryDataFilter(collection));
    req = Object.assign(...req, reqParam);
    purmamPage(req).then((res) => {
      // data.value = res.data.records;
      base.pagination.total = res.data.total;
    });
  };

  const init = () => {
    getTableData('search');
  };

  const tapDate = () => {
    getTableData('search');
  };

  const handlePageChange = (page: number) => {
    base.pagination.current = page;
    getTableData('handleChange');
    // init();
  };
  const handlePageSizeChange = (pageSize: number) => {
    base.pagination.pageSize = pageSize;
    getTableData('handleChange');
    // init();
  };

  const edit = () => {
    base.editVisible = true;
  };
  //控制搜索框的显示与隐藏
  const changeSearchBar = () => {
    base.showSearchBar = !base.showSearchBar;
    if (base.showSearchBar) {
      base.searchBar = '隐藏搜索';
    } else {
      base.searchBar = '显示搜索';
    }
  };

  return {
    base,
    collection,
    opArticleNumber,
    init,
    tapDate,
    handlePageChange,
    handlePageSizeChange,
    edit,
    changeSearchBar,
  };
}
